<template>
  <view class="settings-container">
    <view class="settings-group">
      <view class="setting-item" @click="navigateTo('/pages/settings/general')">
        <view class="setting-info">
          <text class="iconfont icon-general setting-icon"></text>
          <text class="setting-name">通用设置</text>
        </view>
        <text class="iconfont icon-right"></text>
      </view>
      
      <view class="setting-item" @click="navigateTo('/pages/settings/notification')">
        <view class="setting-info">
          <text class="iconfont icon-notification setting-icon"></text>
          <text class="setting-name">通知设置</text>
        </view>
        <text class="iconfont icon-right"></text>
      </view>
      
      <view class="setting-item" @click="navigateTo('/pages/settings/security')">
        <view class="setting-info">
          <text class="iconfont icon-security setting-icon"></text>
          <text class="setting-name">账号安全</text>
        </view>
        <text class="iconfont icon-right"></text>
      </view>
    </view>
    
    <view class="settings-group">
      <view class="setting-item" @click="navigateTo('/pages/settings/privacy')">
        <view class="setting-info">
          <text class="iconfont icon-privacy setting-icon"></text>
          <text class="setting-name">隐私</text>
        </view>
        <text class="iconfont icon-right"></text>
      </view>
      
      <view class="setting-item">
        <view class="setting-info">
          <text class="iconfont icon-theme setting-icon"></text>
          <text class="setting-name">主题</text>
        </view>
        <view class="setting-switch">
          <text class="switch-label">{{ settings.theme === 'dark' ? '深色' : '浅色' }}</text>
          <switch :checked="settings.theme === 'dark'" @change="toggleTheme" color="#3F7BFC" />
        </view>
      </view>
      
      <view class="setting-item">
        <view class="setting-info">
          <text class="iconfont icon-notification setting-icon"></text>
          <text class="setting-name">通知</text>
        </view>
        <view class="setting-switch">
          <switch :checked="settings.notificationsEnabled" @change="toggleNotifications" color="#3F7BFC" />
        </view>
      </view>
    </view>
    
    <view class="settings-group">
      <view class="setting-item" @click="navigateTo('/pages/settings/feedback')">
        <view class="setting-info">
          <text class="iconfont icon-feedback setting-icon"></text>
          <text class="setting-name">反馈与帮助</text>
        </view>
        <text class="iconfont icon-right"></text>
      </view>
      
      <view class="setting-item" @click="navigateTo('/pages/settings/about')">
        <view class="setting-info">
          <text class="iconfont icon-info setting-icon"></text>
          <text class="setting-name">关于我们</text>
        </view>
        <text class="iconfont icon-right"></text>
      </view>
      
      <view class="setting-item" @click="navigateTo('/pages/settings/disclaimer')">
        <view class="setting-info">
          <text class="iconfont icon-disclaimer setting-icon"></text>
          <text class="setting-name">免责声明</text>
        </view>
        <text class="iconfont icon-right"></text>
      </view>
    </view>
    
    <view class="settings-group">
      <view class="setting-item" @click="clearCache">
        <view class="setting-info">
          <text class="iconfont icon-clear setting-icon"></text>
          <text class="setting-name">清除缓存</text>
        </view>
        <text class="cache-size">{{ cacheSize }}</text>
      </view>
      
      <view class="setting-item" @click="logout">
        <view class="setting-info">
          <text class="iconfont icon-logout setting-icon logout-color"></text>
          <text class="setting-name logout-color">退出登录</text>
        </view>
      </view>
    </view>
    
    <view class="app-version">
      <text class="version-text">当前版本: 1.0.0</text>
    </view>
  </view>
</template>

<script>
import { useUserStore } from '@/store/userStore';
import { storeToRefs } from 'pinia';

export default {
  setup() {
    const userStore = useUserStore();
    const { settings } = storeToRefs(userStore);
    
    return {
      userStore,
      settings
    };
  },
  
  data() {
    return {
      cacheSize: '12.5MB'
    };
  },
  
  onLoad() {
    this.loadSettings();
    this.calculateCacheSize();
  },
  
  methods: {
    loadSettings() {
      this.userStore.loadSettingsFromStorage();
    },
    
    calculateCacheSize() {
      // 实际项目中可以调用API获取缓存大小
      // 这里仅作演示，使用模拟数据
      setTimeout(() => {
        this.cacheSize = '12.5MB';
      }, 500);
    },
    
    navigateTo(url) {
      uni.navigateTo({
        url
      });
    },
    
    toggleTheme(e) {
      const isDark = e.detail.value;
      this.userStore.updateSettings({
        theme: isDark ? 'dark' : 'light'
      });
    },
    
    toggleNotifications(e) {
      const enabled = e.detail.value;
      this.userStore.updateSettings({
        notificationsEnabled: enabled
      });
    },
    
    clearCache() {
      uni.showModal({
        title: '提示',
        content: '确定要清除缓存吗？',
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({
              title: '清除中...'
            });
            
            // 模拟清除过程
            setTimeout(() => {
              uni.hideLoading();
              uni.showToast({
                title: '缓存已清除',
                icon: 'success'
              });
              this.cacheSize = '0B';
            }, 1500);
          }
        }
      });
    },
    
    logout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            // 清除当前用户会话数据
            uni.clearStorageSync();
            
            // 重新初始化默认用户数据
            this.userStore.updateUserInfo({
              avatar: '/static/images/default-avatar.png',
              nickname: '用户',
              gender: '保密',
              bio: '这个人很懒，什么都没有留下',
              location: '未知'
            });
            
            this.userStore.updateSettings({
              theme: 'light',
              notificationsEnabled: true,
              privacyMode: false,
              autoSave: true
            });
            
            // 显示退出成功提示
            uni.showToast({
              title: '已退出登录',
              icon: 'success'
            });
            
            // 返回到登录页或首页
            setTimeout(() => {
              uni.reLaunch({
                url: '/pages/index/index'
              });
            }, 1500);
          }
        }
      });
    }
  }
};
</script>

<style>
.settings-container {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding: 20rpx 0;
}

.settings-group {
  background-color: #fff;
  border-radius: 16rpx;
  margin: 0 20rpx 30rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1px solid #f0f2f5;
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-info {
  display: flex;
  align-items: center;
}

.setting-icon {
  font-size: 36rpx;
  color: #3F7BFC;
  margin-right: 20rpx;
}

.setting-name {
  font-size: 30rpx;
  color: #333;
}

.setting-switch {
  display: flex;
  align-items: center;
}

.switch-label {
  font-size: 28rpx;
  color: #999;
  margin-right: 20rpx;
}

.cache-size {
  font-size: 28rpx;
  color: #999;
}

.logout-color {
  color: #ff5252;
}

.app-version {
  text-align: center;
  padding: 40rpx 0;
}

.version-text {
  font-size: 24rpx;
  color: #999;
}
</style> 